<!--
@description ：活码统计
-->

<template>
  <div class="app-container">
    <div class="header-title" style="display: flex">
      <div class="text">活码统计</div>
    </div>
    <div class="data-textarea">
      <div class="data-card" style="margin-left: 0">
        <div class="data-info">
          <div>
            <svg-icon icon-class="allAddCus" style="font-size: 26px"></svg-icon>
            总添加客户
          </div>
          <el-tooltip content="通过活码添加的全部客户" effect="dark" placement="top">
            <svg-icon icon-class="question-white"></svg-icon>
          </el-tooltip>
        </div>
        <div class="data-num">
          {{ allAddCus || 0 }}
        </div>
      </div>
      <div class="data-card">
        <div class="data-info">
          <div>
            <svg-icon icon-class="allDel" style="font-size: 26px"></svg-icon>
            总删除客户
          </div>
          <el-tooltip content="通过活码添加后被删除的客户（包含客户删除员工和员工删除客户）" effect="dark"
                      placement="top">
            <svg-icon icon-class="question-white"></svg-icon>
          </el-tooltip>
        </div>
        <div class="data-num">
          {{ allDel || 0 }}
        </div>
      </div>
      <div class="data-card">
        <div class="data-info">
          <div>
            <svg-icon icon-class="allAdd" style="font-size: 26px"></svg-icon>
            总净增客户
          </div>
          <el-tooltip content="（总添加客户减去总删除客户）*客单价；无客单价的情况下数据为0" effect="dark" placement="top">
            <svg-icon icon-class="question-white"></svg-icon>
          </el-tooltip>
        </div>
        <div class="data-num">
          {{ allAdd || 0 }}
        </div>
      </div>
      <div class="data-card" style="margin-right: 0">
        <div class="data-info">
          <div>
            <svg-icon icon-class="todayAddCus" style="font-size: 26px"></svg-icon>
            今日新增客户
          </div>
          <el-tooltip content="今日通过活码添加的全部客户" effect="dark" placement="top">
            <svg-icon icon-class="question-white"></svg-icon>
          </el-tooltip>
        </div>
        <div class="data-num">
          {{ todayAddCus || 0 }}
        </div>
      </div>
      <div class="data-card" style="margin-right: 0">
        <div class="data-info">
          <div>
            <svg-icon icon-class="todayDel" style="font-size: 26px"></svg-icon>
            今日删除客户
          </div>
          <el-tooltip content="今日删除的客户数（包含客户删除员工和员工删除客户）" effect="dark" placement="top">
            <svg-icon icon-class="question-white"></svg-icon>
          </el-tooltip>
        </div>
        <div class="data-num">
          {{ todayDel || 0 }}
        </div>
      </div>
      <div class="data-card" style="margin-right: 0">
        <div class="data-info">
          <div>
            <svg-icon icon-class="todayAdd" style="font-size: 26px"></svg-icon>
            今日净增客户
          </div>
          <el-tooltip content="（今日总添加客户减去今日删除客户）*客单价；无客单价的情况下数据为0；" effect="dark"
                      placement="top">
            <svg-icon icon-class="question-white"></svg-icon>
          </el-tooltip>
        </div>
        <div class="data-num">
          {{ todayAdd || 0 }}
        </div>
      </div>
    </div>
    <div class="data-table">
      <el-tabs v-model="activeTab" @tab-click="tabClick">
        <el-tab-pane label="活码排行" name="0">
          <NormalForm :enumOpt="enumOpt" :formList="formListLiveCodeList" :operateForm="queryFormLiveCodeList"
                      pageTitle="" style="margin-top: -26px;" @dateChange="dateChange"
                      @handleQuery="handleRankQuery"
                      @handleReset="handleRankReset" @radioDateSelect="radioDateSelect"></NormalForm>
          <el-table v-loading="loadingliveCodeList" :data="liveCodeList" height="300px"
                    style="margin: 0 16px;width: auto;">
            <el-table-column align="center" label="排行" prop="sort" width="55"></el-table-column>
            <el-table-column align="center" label="活码名称" prop="activityName" show-overflow-tooltip/>
            <el-table-column align="center" label="总添加客户" prop="addCus" show-overflow-tooltip width="150"/>
          </el-table>
          <NormalPagination :currentPage="queryFormLiveCodeList.pageNum" :pageSize="queryFormLiveCodeList.pageSize"
                            :total="totalLiveCodeList" @handleCurrentChange="handleCurrentRankChange"
                            @handleSizeChange="handleSizeRankChange" :pageSizeList="pageSizeList">
          </NormalPagination>
        </el-tab-pane>
        <el-tab-pane label="客户趋势" name="1">
          <div style="display: flex;justify-content: space-between;align-items: center">
            <div style="line-height: 36px;display: flex;align-items: center;margin-left: 42px">
              <svg-icon icon-class="line_#14D595" style="font-size: 32px;margin-right: 6px"></svg-icon>
              <span style="margin-right: 16px">总添加客户</span>
              <svg-icon icon-class="line_#FFAD3A" style="font-size: 32px;margin-right: 6px"></svg-icon>
              <span style="margin-right: 16px">总新增客户</span>
              <svg-icon icon-class="line_#082aff" style="font-size: 32px;margin-right: 6px"></svg-icon>
              <span style="margin-right: 16px">总净增客户</span>
            </div>
            <!--            <NormalForm :enumOpt="enumOpt" :formList="formListLiveCodeList"-->
            <!--                        :operateForm="queryFormLiveCodeList" pageTitle="" @dateChange="dateChange" @handleQuery="handleQuery"-->
            <!--                        @handleReset="handleReset" @radioDateSelect="radioDateSelect" style="margin-top: -26px;display: block;width: 800px"></NormalForm>-->
            <el-form ref="operateForm" :model="queryFormTrendDetail" style="margin: 15px 30px 15px 5px;display: flex;">
              <el-form-item prop="timeType">
                <el-radio-group v-model="queryFormTrendDetail.timeType"
                                style="display: flex;justify-content: space-evenly;width: 260px"
                                @input="radioDateSelectDetail(queryFormTrendDetail.timeType,'trend')">
                  <div v-for="item in enumOpt1.timeTypeOpt" :key="item.dictValue">
                    <el-radio-button :label="item.dictValue">{{ item.dictLabel }}</el-radio-button>
                  </div>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="selectTime">
                <el-date-picker v-model="queryFormTrendDetail.selectTime" :end-placeholder="'结束日期'"
                                :start-placeholder="'开始日期'"
                                range-separator="至" style="width: 100%;" type="daterange"
                                value-format="yyyy-MM-dd"
                                @change="(val) => dateChangeDetail(val, { fileBytes: ['startTime', 'endTime'] }, 'queryFormTrendDetail')"></el-date-picker>
              </el-form-item>
            </el-form>
          </div>
          <!-- 图表 -->
          <div class="chart">
            <div id="customerTrends"></div>
          </div>

        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="core">
      <div class="head">
        <!-- 头部左侧标题 -->
        <div class="infostyle">
          <div class="titleboxstyle"></div>
          <div style="margin-left: 10px">活码详细</div>
        </div>
      </div>

      <div class="content">
        <!-- <NormalForm :enumOpt="enumOpt" :formList="formListDetail" :operateForm="queryFormDetail" pageTitle=""
          @dateChange="dateChange" @handleQuery="handleQuery" @handleReset="handleReset" :showSearchBtn="false"
          @radioDateSelect="radioDateSelect"></NormalForm> -->

        <el-form ref="operateForm" :model="queryFormDetail" style="margin: 15px 0 15px 5px;">
          <el-row>
            <el-col :lg="4" :md="8" :sm="12" :xs="24" style="padding: 0;height: 52px;">
              <el-form-item prop="activityNameType">
                <el-select v-model="queryFormDetail.activityNameType" clearable placeholder="活码类型"
                           style="width: 100%;">
                  <el-option v-for="item in activityNameList" :key="item.dictValue" :label="item.dictLabel"
                             :value="item.dictValue"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="8" :sm="12" :xs="24" style="padding: 0;height: 52px;">
              <el-form-item prop="activityName">
                <el-input v-model="queryFormDetail.activityName" clearable placeholder="活码名称"
                          style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="6" :ls="12" :md="8" :xl="4" :xs="24" style="padding: 0;height: 52px;">
              <el-form-item prop="timeType">
                <el-radio-group v-model="queryFormDetail.timeType" style="display: flex;justify-content: space-evenly"
                                @input="radioDateSelectDetail(queryFormDetail.timeType, 'table')">
                  <div v-for="item in enumOpt.timeTypeOpt" :key="item.dictValue">
                    <el-radio-button :label="item.dictValue">{{ item.dictLabel }}</el-radio-button>
                  </div>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :lg="6" :ls="12" :md="8" :xl="4" :xs="24" style="padding: 0;height: 52px;">
              <el-form-item prop="selectTime">
                <el-date-picker v-model="queryFormDetail.selectTime" :end-placeholder="'结束日期'"
                                :start-placeholder="'开始日期'"
                                range-separator="至" style="width: 100%;" type="daterange"
                                value-format="yyyy-MM-dd"
                                @change="(val) => dateChangeDetail(val, { fileBytes: ['startTime', 'endTime'] }, 'queryFormDetail')"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="7" :sm="12" :xs="24" style="padding: 0;">
              <el-form-item>
                <el-button :loading="loadingDetail" icon="el-icon-search" type="primary" @click="handleQuery">查
                  询
                </el-button>
                <el-button icon="el-icon-refresh" plain type="info" @click="handleReset">重 置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="table-top-box">
          <div>
            <span>总添加客户：{{ details.todayTotalAddCus }}</span>
            <span style="margin: 0 80px;">总删除客户：{{ details.todayTotalDelCus }}</span>
            <span>总净增客户：{{ details.todayTotalIncrease }}</span>
          </div>
          <el-button type="primary" @click="exportDetail">数据导出
          </el-button>
        </div>
        <el-table v-loading="loadingDetail" :data="tableListDetail" height="300px"
                  style="width: auto;width: auto;margin: 16px 16px 0;">
          <el-table-column align="center" label="序号" type="index" width="55"/>
          <el-table-column align="center" label="活码名称" prop="activityName" show-overflow-tooltip/>
          <el-table-column align="center" label="当日新增客户" prop="addCus" show-overflow-tooltip/>
          <el-table-column align="center" label="当日删除客户" prop="delCus" show-overflow-tooltip/>
          <el-table-column align="center" label="当日净增客户" prop="increase" show-overflow-tooltip/>
        </el-table>
        <NormalPagination :currentPage="queryFormDetail.pageNum" :pageSize="queryFormDetail.pageSize"
                          :total="totalDetail"
                          @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
        </NormalPagination>
      </div>
    </div>
  </div>
</template>
<script>

import * as echarts from 'echarts'
import 'echarts-wordcloud'
import {queryStatistics, queryTrend, queryRank, searchDetail, exportDetail} from "@/api/codeStatistics";
import moment from "moment";
import {downLoadFile} from "@/utils/common";

export default {
  name: "codeStatistics", //页面名称，必填
  props: {},
  components: {},
  data() {
    return {
      myChart: '',
      allAddCus: 0,
      allDel: 0,
      allAdd: 0,
      todayAddCus: 0,
      todayDel: 0,
      todayAdd: 0,
      activeTab: '0',
      enumOpt: {
        timeTypeOpt: [
          {dictValue: '0', dictLabel: '今日'},
          {dictValue: '1', dictLabel: '最近7天'},
          {dictValue: '2', dictLabel: '最近30天'},
        ],
      },
      pageSizeList: [5,10,20,30,50],
      enumOpt1: {
        timeTypeOpt: [
          // {dictValue: '0', dictLabel: '今日'},
          {dictValue: '1', dictLabel: '最近7天'},
          {dictValue: '2', dictLabel: '最近30天'},
        ],
      },
      formListLiveCodeList: [
        {},
        {
          lg: 6,
          xl: 12,
        },
        {
          label: '',
          value: '',
          prop: 'timeType',
          type: 'RADIO_DATE_SELECT',
          emunName: 'timeTypeOpt',
          xs: 24,
          ls: 12,
          md: 8,
          lg: 6,
          xl: 4,
        },
        {
          label: '',
          value: [],
          prop: 'selectTime',
          type: 'DATE_RANGE',
          emunName: '',
          formate: 'yyyy-MM-dd',
        },
      ],
      queryFormLiveCodeList: {
        timeType: '',
        selectTime: [],
        pageNum: 1,
        pageSize: 5,
      },
      loadingliveCodeList: false,
      liveCodeList: [],
      totalLiveCodeList: 0,

      formListDetail: [
        {
          label: '活码类型',
          value: '',
          prop: 'aaaa',
          type: 'SELECT',
          emunName: ''
        },
        {
          label: '活码名称',
          value: '',
          prop: 'bbbb',
          type: 'SELECT',
          emunName: ''
        },
        // {
        //   lg: 6,
        //   xl: 12,
        // },
        {
          label: '',
          value: '',
          prop: 'timeType',
          type: 'RADIO_DATE_SELECT',
          emunName: 'timeTypeOpt',
          xs: 24,
          ls: 12,
          md: 8,
          lg: 6,
          xl: 4,
        },
        {
          label: '',
          value: [],
          prop: 'selectTime',
          type: 'DATE_RANGE',
          emunName: '',
          formate: 'yyyy-MM-dd',
        },
      ],
      queryFormTrendDetail: {
        timeType: '1',
        selectTime: [],
      },
      queryFormDetail: {
        activityNameType: '1',
        activityName: '',
        timeType: '0',
        selectTime: [],
        pageNum: 1,
        pageSize: 20,
      },
      loadingDetail: false,
      tableListDetail: [],
      totalDetail: 0,
      activityNameList: [
        {
          dictValue: '1',
          dictLabel: '渠道活码'
        }
      ],
      details: {
        todayTotalAddCus: 0,
        todayTotalDelCus: 0,
        todayTotalIncrease: 0,
      }
    }
  },
  created() {
  },
  mounted() {
    this.$set(this.queryFormTrendDetail, 'selectTime', this.returnSelectDate(this.queryFormTrendDetail.timeType))
    this.$set(this.queryFormDetail, 'selectTime', this.returnSelectDate(this.queryFormDetail.timeType))
    this.searchHeader()
    this.tabClick()
    this.handleQuery()
  },
  watch: {
    'queryFormTrendDetail.selectTime': {
      deep: true,
      immediate: true,
      handler(newValue, oldValue) {
        this.initChart()
      }
    }
  },
  methods: {
    searchHeader() {
      queryStatistics().then(res => {
        if (res.code == 200) {
          this.allAddCus = res.data.totalAddCus || 0;
          this.allDel = res.data.totalDelCus || 0;
          this.allAdd = res.data.totalIncrease || 0;
          this.todayAddCus = res.data.addCus || 0;
          this.todayDel = res.data.delCus || 0;
          this.todayAdd = res.data.increase || 0;
        }
      })
    },
    handleRankQuery() {
      this.queryFormLiveCodeList.pageNum = 1
      this.getRankListFn()
    },
    handleRankReset() {
      this.queryFormLiveCodeList = {
        timeType: '',
        selectTime: [],
        pageNum: 1,
        pageSize: 20,
      }
      this.getRankListFn()
    },
    getRankListFn() {
      let params = {
        startTime: this.queryFormLiveCodeList.selectTime && this.queryFormLiveCodeList.selectTime.length > 0 ? moment(this.queryFormLiveCodeList.selectTime[0]).format('yyyy-MM-DD') : '',
        endTime: this.queryFormLiveCodeList.selectTime && this.queryFormLiveCodeList.selectTime.length > 0 ? moment(this.queryFormLiveCodeList.selectTime[1]).format('yyyy-MM-DD') : '',
        pageNum: this.queryFormLiveCodeList.pageNum || 1,
        pageSize: this.queryFormLiveCodeList.pageSize || 20,
      }
      this.loadingliveCodeList = true
      queryRank(params).then(res => {
        this.loadingliveCodeList = false
        if (res.code == 200) {
          this.liveCodeList = res.rows || []
          this.totalLiveCodeList = res.total || 0
        }
      }).catch(() => {
        this.loadingliveCodeList = false
      })
    },
    tabClick() {
      if (this.activeTab == '0') {
        this.handleRankQuery()
      } else if (this.activeTab == '1') {
        window.setTimeout(() => {
          this.initChart()
        }, 100)
      }
    },
    radioDateSelect(val) {
      console.log(val)
      this.handleRankQuery()
    },
    radioDateSelectDetail(val, flag) {
      console.log(val, flag)
      let da = 0
      // if (this.formList.some(item => item.type == 'DATE_RANGE')) {
      if (val == '0') {
        da = 1
      } else if (val == '1') {
        da = 7
      } else if (val == '2') {
        da = 30
      }
      let currentDate = new Date();
      currentDate.setHours(0, 0, 0, 0); // 将时间设置为当天的凌晨
      let endDate = currentDate.toISOString().substring(0, 10); // 当天的日期作为结束日期
      currentDate.setDate(currentDate.getDate() - da + 1); // 将日期设置为需要的天数
      let startDate = currentDate.toISOString().substring(0, 10); // 将设置的天数作为开始日期
      let datesArray = [startDate, endDate]
      if (flag == 'trend') {
        this.$nextTick(() => {
          this.$set(this.queryFormTrendDetail, 'selectTime', datesArray)
          this.initChart()
        })
      } else if (flag == 'table') {
        this.$nextTick(() => {
          this.$set(this.queryFormDetail, 'selectTime', datesArray)
        })
      }
    },
    returnSelectDate(val) {
      let da = 0
      // if (this.formList.some(item => item.type == 'DATE_RANGE')) {
      if (val == '0') {
        da = 1
      } else if (val == '1') {
        da = 7
      } else if (val == '2') {
        da = 30
      }
      let currentDate = new Date();
      currentDate.setHours(0, 0, 0, 0); // 将时间设置为当天的凌晨
      let endDate = currentDate.toISOString().substring(0, 10); // 当天的日期作为结束日期
      currentDate.setDate(currentDate.getDate() - da + 1); // 将日期设置为需要的天数
      let startDate = currentDate.toISOString().substring(0, 10); // 将设置的天数作为开始日期
      let datesArray = [startDate, endDate]
      console.log(datesArray, 'datesArray')
      return datesArray
    },
    dateChange() {
    },
    // range 日期change事件
    dateChangeDetail(val, item, byte) {
      let valNew = val || ["", ""];
      item.fileBytes.forEach((fileByte, index) => this.$set(this[byte], fileByte, valNew[index]));
    },
    handleQuery() {
      this.queryFormDetail.pageNum = 1
      this.getListFn()
    },
    handleReset() {
      this.queryFormDetail = {
        activityNameType: '1',
        activityName: '',
        timeType: '',
        selectTime: [],
        pageNum: 1,
        pageSize: 20,
      }
      this.$set(this.queryFormDetail, 'selectTime', this.returnSelectDate(this.queryFormDetail.timeType))
      this.getListFn()
    },
    getListFn() {
      let params = {
        ...this.queryFormDetail,
        startTime: this.queryFormDetail.selectTime && this.queryFormDetail.selectTime.length > 0 ? this.queryFormDetail.selectTime[0] : this.returnSelectDate(this.queryFormDetail.timeType)[0],
        endTime: this.queryFormDetail.selectTime && this.queryFormDetail.selectTime.length > 0 ? this.queryFormDetail.selectTime[1] : this.returnSelectDate(this.queryFormDetail.timeType)[1]
      }
      this.loadingDetail = true
      searchDetail(params).then(res => {
        this.loadingDetail = false
        if (res.code == 200) {
          this.tableListDetail = res.data.dateList
          this.totalDetail = res.data.totalPageSize || 0
          this.details = {
            todayTotalAddCus: res.data.todayTotalAddCus || 0,
            todayTotalDelCus: res.data.todayTotalDelCus || 0,
            todayTotalIncrease: res.data.todayTotalIncrease || 0,
          }
        }
      }).catch(() => {
        this.loadingDetail = false
      })
    },
    // 翻页
    handleSizeRankChange(val) {
      this.queryFormLiveCodeList.pageNum = 1
      this.queryFormLiveCodeList.pageSize = val
      this.getRankListFn()
    },
    handleCurrentRankChange(val) {
      this.queryFormLiveCodeList.pageNum = val
      this.getRankListFn()
    },
    // 翻页
    handleSizeChange(val) {
      this.queryFormDetail.pageNum = 1
      this.queryFormDetail.pageSize = val
      this.getListFn()
    },
    handleCurrentChange(val) {
      this.queryFormDetail.pageNum = val
      this.getListFn()
    },
    initChart() {
      // this.radioDateSelectDetail(this.queryFormTrendDetail.timeType, 'trend', '1')
      let params = {
        startTime: this.queryFormTrendDetail.selectTime && this.queryFormTrendDetail.selectTime.length > 0 ? this.queryFormTrendDetail.selectTime[0] : this.returnSelectDate(this.queryFormTrendDetail.timeType)[0],
        endTime:  this.queryFormTrendDetail.selectTime && this.queryFormTrendDetail.selectTime.length > 0 ? this.queryFormTrendDetail.selectTime[1] : this.returnSelectDate(this.queryFormTrendDetail.timeType)[1],
      }
      queryTrend(params).then(res => {
        if (res.code == 200) {
          let NameData = res.data.map(item => item.date)
          let datePolicyNum = res.data.map(item => item.totalAddCus)
          let dateSignCustomerNum = res.data.map(item => item.totalDelCus)
          let addCustomerNum = res.data.map(item => item.totalIncrease)
          let NameData1 = ['NameDate', ...NameData] || ['NameDate']
          let datePolicyNum1 = ['datePolicyNum', ...datePolicyNum] || ['datePolicyNum']
          let dateSignCustomerNum1 = ['dateSignCustomerNum', ...dateSignCustomerNum] || ['dateSignCustomerNum']
          let addCustomerNum1 = ['addCustomerNum', ...addCustomerNum] || ['addCustomerNum']
          window.setTimeout(() => {
            this.myChart = echarts.init(document.getElementById('customerTrends'))
            this.myChart.dispose();
            this.myChart = echarts.init(document.getElementById('customerTrends'))
            this.myChart.setOption({
              dataset: {
                source: [
                  NameData1,
                  datePolicyNum1,
                  dateSignCustomerNum1,
                  addCustomerNum1
                ]
              },
              tooltip: {
                trigger: 'axis'
              },
              // legend: {
              //   //   orient: "vertical",
              //   x: 'right', //可设定图例在左、右、居中
              //   y: 'top', //可设定图例在上、下、居中
              //   padding: [30, 15, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离
              //   data: ['总添加客户', '总新增客户', '总净增客户']
              // },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              color: ['#14D595', '#FFAD3A', '#082aff'],
              xAxis: {
                type: 'category',
                data: NameData,
                axisLabel: {
                  interval: 0,
                  rotate: NameData.length > 8 ? 45 : 0
                }
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  seriesLayoutBy: 'row',
                  emphasis: {focus: 'series'},
                  name: '总添加客户',
                  type: 'line',
                  smooth: true,
                  symbol: 'circle',
                  symbolSize: 5,
                  // showSymbol: false,
                  lineStyle: {
                    normal: {
                      width: 2
                    }
                  },
                  showSymbol: true,
                  areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                          {
                            offset: 0,
                            color: 'rgba(255,82,82,0.06)'
                          },
                          {
                            offset: 0.8,
                            color: 'rgba(254,97,89,0)'
                          }
                        ],
                        false
                      ),
                      shadowColor: 'rgba(0, 0, 0, 0.1)',
                      shadowBlur: 10
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: '#14D595',
                      borderColor: 'rgba(255,207,118,0.27)',
                      borderWidth: 12
                    }
                  },
                },
                {
                  seriesLayoutBy: 'row',
                  emphasis: {focus: 'series'},
                  name: '总新增客户',
                  type: 'line',
                  smooth: true,
                  symbol: 'circle',
                  symbolSize: 5,
                  // showSymbol: false,
                  lineStyle: {
                    normal: {
                      width: 2
                    }
                  },
                  showSymbol: true,
                  areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                          {
                            offset: 0,
                            color: 'rgba(255,82,82,0.06)'
                          },
                          {
                            offset: 0.8,
                            color: 'rgba(254,97,89,0)'
                          }
                        ],
                        false
                      ),
                      shadowColor: 'rgba(0, 0, 0, 0.1)',
                      shadowBlur: 10
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: '#FFAD3A',
                      borderColor: 'rgba(255,207,118,0.27)',
                      borderWidth: 12
                    }
                  },
                },
                {
                  seriesLayoutBy: 'row',
                  emphasis: {focus: 'series'},
                  name: '总净增客户',
                  type: 'line',
                  smooth: true,
                  symbol: 'circle',
                  symbolSize: 5,
                  // showSymbol: false,
                  lineStyle: {
                    normal: {
                      width: 2
                    }
                  },
                  showSymbol: true,
                  areaStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                          {
                            offset: 0,
                            color: 'rgba(255,82,82,0.06)'
                          },
                          {
                            offset: 0.8,
                            color: 'rgba(254,97,89,0)'
                          }
                        ],
                        false
                      ),
                      shadowColor: 'rgba(0, 0, 0, 0.1)',
                      shadowBlur: 10
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: '#082aff',
                      borderColor: 'rgba(255,207,118,0.27)',
                      borderWidth: 12
                    }
                  },
                }
              ]
            })
          }, 10)
        }
      })
    },
    exportDetail(){
      let params = {
        activityName: this.queryFormDetail.activityName || '',
        startTime: this.queryFormDetail.selectTime && this.queryFormDetail.selectTime.length > 0 ? this.queryFormDetail.selectTime[0] : this.returnSelectDate(this.queryFormDetail.timeType)[0],
        endTime: this.queryFormDetail.selectTime && this.queryFormDetail.selectTime.length > 0 ? this.queryFormDetail.selectTime[1] : this.returnSelectDate(this.queryFormDetail.timeType)[1]
      }
      downLoadFile('/admin/admin/channlCode/export', params, '活码详细数据.xlsx')
    }
  },
}

</script>

<style lang="scss" scoped>
.app-container {
  height: 100%;
}


.app-container {
  height: 100%;
  padding: 0;

  .header-title {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    background-color: white;
    height: 60px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 6px;

    .text {
      font-size: 20px;
    }
  }
}

.data-textarea {
  display: flex;

  .data-card {
    flex: 1;
    background-color: #fff;
    border-radius: 8px;
    margin: 10px;
    //height: 100px;
    padding: 16px 12px 12px 18px;
  }
}

.data-info {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  font-size: 14px;
  align-items: center;
}

.data-num {
  font-size: 42px;
  font-weight: 500;
  padding-bottom: 10px;
}

.data-table {
  background-color: #fff;
  margin-top: 12px;

  .data-tabs {
    padding: 0 20px;
  }
}

.core {
  position: relative;
  margin-top: 20px;
  width: 100%;
  background: #ffffff;
  border-radius: 8px;
  padding: 16px 0;

  .infostyle {
    flex: 1;
    display: flex;
    flex-direction: row;
    // margin-top: 14px;
    // margin-bottom: 25px;
    // font-size: 18px;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: bold;
    color: #393b44;

    .titleboxstyle {
      display: inline-block;
      width: 2px;
      height: 16px;
      background-color: #082aff;
    }
  }

  .content {
    margin-top: 16px;
    border-top: 1px solid #F0F0F0;

    .table-top-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 16px;
    }
  }
}

.chart {
  width: 100%;
  //padding-right: 40px;
  //padding-left: 20px;

  #customerTrends {
    //flex: 1;
    //box-sizing: border-box;
    // width: 1240px;
    height: 280px;
    //border-radius: 9px;
    //border: 1px solid #eeeeee;
    margin: -36px 0 0 20px;
    //margin-bottom: 30px;
    //padding: 10px 10px 10px 10px;
  }
}
</style>
